import { allEvaluate } from '@/services/evaluate';
import { selectById } from '@/services/user';
import { colorStr } from '@/utils/utils';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Avatar, Button, List, Modal, Rate } from 'antd';
import { useCallback, useEffect, useState } from 'react';
import styles from '../index.less';

interface Props {
  color: string;
  goodsid: string;
}
const GoodsAppraise: React.FC<Props> = ({ color, goodsid }) => {
  const [checkModal, setCheckModal] = useState<boolean>(false);
  const [list, setList] = useState<any[]>([]);
  const [pageSize, setPageSize] = useState(5);
  const [other, setOther] = useState({
    nickname: '',
    id: '',
    tel: '',
    mail: '',
    ifAgree: false,
    rate: 0,
  });
  const customIcons: Record<number, React.ReactNode> = {
    1: <FrownOutlined />,
    2: <FrownOutlined />,
    3: <MehOutlined />,
    4: <SmileOutlined />,
    5: <SmileOutlined />,
  };

  const selectUser = async (userId: string) => {
    try {
      await selectById({ id: userId, role: '1' }).then((res) => {
        setOther(res);
      });
    } catch (error) {
      console.log(error);
    }
  };

  const getList = useCallback(async () => {
    try {
      const res = await allEvaluate({ pageIndex: 1, pageSize: pageSize, goodsId: goodsid });
      setList(res.list);
    } catch (error) {
      console.error(error);
    }
  }, [goodsid, pageSize]);

  useEffect(() => {
    getList();
  }, [getList]);

  return (
    <div className={styles.appraiseContent}>
      <List
        itemLayout="horizontal"
        dataSource={list}
        renderItem={(item) => (
          <List.Item
            actions={[
              <div
                key={item.id}
                className={styles.agreed}
                style={{ color: item.ifAgree ? color : '#666' }}
              >
                {/* <div
                  className={styles.triangle}
                  style={{ borderBottom: item.ifAgree ? `11px solid ${color}` : '11px solid #666' }}
                >
                  <div className={styles.triangleLittle} />
                </div>
                有用（{item.agreeQty}） */}
              </div>,
            ]}
          >
            <List.Item.Meta
              avatar={
                <Avatar
                  size={35}
                  src={
                    <img
                      src={`http://localhost:8090/dyh/upload_images/user/${item.avatar}`}
                      alt=""
                    />
                  }
                />
              }
              title={
                <div>
                  <span
                    className={styles.otherIn}
                    onClick={async () => {
                      setCheckModal(true);
                      selectUser(item.userid);
                    }}
                  >
                    {item.username}
                  </span>
                  <Rate
                    defaultValue={item.star}
                    character={({ index }: any) => customIcons[index + 1]}
                    disabled
                  />
                </div>
              }
              description={<span>{item.usercontent}</span>}
            />
          </List.Item>
        )}
      />
      <div className={styles.bottomLoading}>
        {list.length < pageSize ? (
          <span>暂无更多评论</span>
        ) : (
          <Button
            onClick={() => {
              setPageSize(pageSize + 5);
            }}
            style={{ background: colorStr(4), color: '#fff' }}
          >
            查看更多评论
          </Button>
        )}
      </div>
      <Modal
        visible={checkModal}
        title={`${other.nickname}的个人信息`}
        onCancel={() => {
          setCheckModal(false);
        }}
        footer={[]}
      >
        <div className={styles.infosStyle}>
          <div className={styles.infoStyle}>买家编号：{other.id}</div>
          <div className={styles.infoStyle}>手机号：{other.tel}</div>
          <div className={styles.infoStyle}>邮箱号：{other.mail}</div>
        </div>
      </Modal>
    </div>
  );
};
export default GoodsAppraise;
